<template>

  <!-- 封装可复用css的过渡效果 -->
  <child1 :fileName="name">
    <div v-if="show1" class="color1">Hello1</div>
  </child1>
  <div><button @click="handleShow1">按钮1</button></div>

  <!-- 封装可复用js的过渡效果 -->
  <child2>
    <!-- 切记这里用v-if和v-show动画效果不一样 -->
    <div v-if="show2" class="color2"></div>
  </child2>
  <div><button @click="handleShow2">按钮2</button></div>
</template>

<script setup>
  import {ref} from 'vue'
  import child1 from './child1.vue'
  import child2 from './child2.vue'
  const name=ref("name")
  const show1=ref(true)
  const show2=ref(true)
  const handleShow1=()=>{
    show1.value=!show1.value
    name.value=name.value=='name'?"fade":"name"
  }

  const handleShow2=()=>{
    show2.value=!show2.value
  }
</script>
<style scoped>
.color1{
  color:red
}
</style>
